<template>
	<div>
		<loading v-if="loading"></loading>
		<div v-if="!loading">
		<div id="header">
			<div class="header-left">
				<div class="btr" v-on:click="goDetlid"></div>
			</div>
			<div class="title">
				{{Comingactor.name_en}} {{Comingactor.name}}
			</div>
			<div class="header-left"></div>
		</div>
		<div class="message">
			<img v-bind:src="Comingactor.avatars.medium">
			<div class="dir">
				<h2>影星资料</h2>
				<p>姓名：{{Comingactor.name}}</p>
				<p>name：{{Comingactor.name_en}}</p>
				<p>性别：{{Comingactor.gender}}</p>
				<p>职业：{{ Comingactor.professions[0]}} {{ Comingactor.professions[1]}}</span></p>
				<p>出生地：{{Comingactor.born_place}}</p>
			</div>
		</div>
		<div class="all">
		<h3>他的代表作</h3>
		<div class="works" v-for="message in Comingactor.works"  v-if="!loading">
			<div class="works_border" v-on:click="gotoDetlid(message.subject.id)">
			<img v-bind:src="message.subject.images.small">
			<div class="works_message">
				<p>{{message.subject.title}}</p>
				<p>{{message.roles[0]}}</p>
				<p>{{message.subject.year}}</p>
				<star :num="message.subject.rating.stars"></star>
				<p>{{message.subject.rating.average}}分 {{message.subject.collect_count}}评价</p>
			</div>
			</div>
		</div>
		</div>
		</div>
	</div>
</template>
<script>
	import loading from "./loading"
	import star from "./star"
	export default{
		name:"Comingactor",
		data(){
			return{
				loading:true,
				Comingactor:{
				}
			}
		},
		  components:{
		    star:star,
		    loading:loading
		  },
		methods:{
			goDetlid:function() {
				this.$router.go(-1)
			},
			gotoDetlid:function(id){
				this.$router.push({name:'MovieDetlid',params:{id:id}})
				console.log(this.id)
			}
		},
		mounted:function(){
			var id = this.$route.params.id
			this.$http.jsonp('https://api.douban.com//v2/movie/celebrity/'+id+'?apikey=0b2bdeda43b5688921839c8ecb20399b').then(function(response){
		    	console.log(response)
		    	this.loading=false
		    	this.Comingactor = response.body;
		    })
		},
		components:{
		    star:star
		  }
	}
</script>
<style scoped>
	#header{
		height: 50px;
		width: 100%;
		background-color: #e54847;
		box-sizing: border-box;
		padding: 6px;
		display: flex;
		text-align: center;
		overflow: hidden;
	}
	#header .header-left{
		flex: 1;
		position: relative;
	}
	#header .header-left .btr{
		position: absolute;
	    top: 12px;
	    left: 20px;
	    height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	#header .title{
		font-size: 20px;
		color:#fff;
		font-weight: bold;
		line-height: 40px;
		flex: 6;
	}
	#header .header-right{
		flex: 1;
	}
	.message{
		overflow: hidden;
		padding: 10px;
		background-color: #b4b1b1;
	}
	.message img{
		float: left;
		margin-right: 15px;
	}
	.message .dir {
		float: left;
		padding-top:10%; 
	}
	.message .dir p{
		font-size: 20px;
	    color: #f0eeee;
	}
	.message .dir h2{
		font-size: 25px;
	    color: #fff;

	}
	.works{
		padding: 10px;
		overflow: hidden;
	}
	.works .works_border{
		padding-bottom:5px;
	    border-bottom: 1px solid #d6d3d3;
		overflow: hidden;
	}
	.works img{
		float: left;
		margin-right: 15px;
	}
	.works .works_message{
		float: left;
	}
	.works .works_message p{
		padding: 5px;
	    font-size: 14px;
	}
	h3{
		color: #333;
	    font-size: 18px;
	    margin-bottom: 10px;
	}
	.all{
		padding: 10px;
		background: #e5e9f2;
		color: #2c3e50;
	}
</style>